// pages/visitors/tools/posterCard/com/poster1/poster1.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    posterData: {
      type: Object,
      value: {}
    }
  },

  /**
   * 组件的配置
   */
  options: {
    styleIsolation: 'isolated',
    pureDataPattern: /^_/
  },

  /**
   * 组件的初始数据
   */
  data: {
    qrCode: '',
    bgImg: '',
    userAddress: '',
    userAvatar: '',
    userName: '',
    userBrand: '',
    userMobile: ''
  },

  /**
   * 组件的监听器
   */
  observers: {
    'posterData': function () {
      let t = this
      let {
        qrCode,
        bgImg,
        userAddress,
        userAvatar,
        userName,
        userBrand,
        userMobile
      } = t.data.posterData
      t.setData({
        qrCode: qrCode || '',
        bgImg: bgImg || '',
        userAddress: userAddress || '',
        userAvatar: userAvatar || '',
        userName: userName || '',
        userBrand: userBrand || '',
        userMobile: userMobile || ''
      })
    },
  },

  /**
   * 组件的生命周期
   */
  lifetimes: {
    attached: function () {

    },
    detached: function () {

    },
  },

  /**
   * 组件的方法列表
   */
  methods: {

    transmitPosterConfig() {
      let t = this;
      let {
        qrCode,
        bgImg,
        userAddress,
        userAvatar,
        userName,
        userBrand,
        userMobile
      } = t.data
      let posterConfig = t.createPosterConfig({
        qrCode,
        bgImg,
        userAddress,
        userAvatar,
        userName,
        userBrand,
        userMobile
      })
      t.triggerEvent('transmit', posterConfig)
    },

    createPosterConfig({
      qrCode,
      bgImg,
      userAddress,
      userAvatar,
      userName,
      userBrand,
      userMobile
    }) {
      return {
        width: '750rpx',
        height: '1354rpx',
        background: `${bgImg}`,
        views: [{
            type: 'image',
            url: `${userAvatar}`,
            css: {
              top: '80rpx',
              right: '80rpx',
              borderRadius: '180rpx',
              borderWidth: '10rpx',
              borderColor: '#fff',
              width: '180rpx',
              height: '180rpx',
              shadow: "0 0 20rpx #666",
            }
          }, {
            type: 'text',
            text: `${userName}`,
            css: {
              width: '300rpx',
              top: "210rpx",
              left: '90rpx',
              fontSize: '50rpx',
              color: '#000',
              fontWeight: 'bold',
              maxLines: '1'
            }
          }, {
            type: 'image',
            url: '/pages/visitors/images/poster_counselor.png',
            css: {
              top: '290rpx',
              left: '90rpx',
              width: '220rpx',
              height: '40rpx',
            }
          }, {
            type: 'image',
            url: '/pages/visitors/images/poster_phone.png',
            css: {
              top: '366rpx',
              left: '90rpx',
              width: '20rpx',
              height: '20rpx',
            }
          }, {
            type: 'text',
            text: `${userMobile}`,
            css: {
              top: "360rpx",
              left: '120rpx',
              fontSize: '28rpx',
              color: '#999',
            }
          }, {
            type: 'image',
            url: '/pages/visitors/images/poster_address.png',
            css: {
              top: '416rpx',
              left: '90rpx',
              width: '18rpx',
              height: '22rpx',
            }
          }, {
            type: 'text',
            text: `${userAddress}`,
            css: {
              top: "410rpx",
              left: '120rpx',
              fontSize: '28rpx',
              color: '#999',
            }
          },
          {
            type: 'rect',
            css: {
              top: '510rpx',
              left: '90rpx',
              width: '570rpx',
              height: '90rpx',
              color: '#efefef',
              borderRadius: '90rpx',
            }
          }, {
            id: 'brand',
            type: 'text',
            text: `${userBrand}`,
            css: {
              top: '538rpx',
              left: '375rpx',
              align: 'center',
              fontSize: '32rpx',
              color: '#333',
              fontWeight: 'bold'
            }
          }, {
            type: 'image',
            url: '/pages/visitors/images/poster_store.png',
            css: {
              top: '542rpx',
              right: ['395rpx', 'brand', 0.5],
              width: '30rpx',
              height: '30rpx',
            }
          }, {
            type: 'image',
            url: `${qrCode}`,
            css: {
              top: '650rpx',
              left: '260rpx',
              borderRadius: '220rpx',
              width: '220rpx',
              height: '220rpx',
            }
          },

        ],
      }
    }
  }
})